<template>
  <div class="content">
    <div class="title">
      <div class="text">
        <div class="font">上周未佩戴安全帽时间高峰</div>
      </div>
    </div>
    <div class="echart">
      <div id="TimeAviso" style="width:100%;height:300px;" />
    </div>
  </div>
</template>

<script>
import { lastWeekData } from '@/api/autonym'

export default {
  name: 'TimeAviso',
  data() {
    return {
      lastWeekData: {},
      datax: [],
      datay: []
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 获取数据
    async getDetail() {
      const res = await lastWeekData()
      if (res.code === 200) {
        if (res.data) {
          this.lastWeekData = res.data
          if (this.lastWeekData) {
            this.lastWeekData.forEach((val, index, arr) => {
              this.datax.push(val.key)
              this.datay.push(val.value)
            })
          }
          this.$nextTick(function() {
            this.drawPie()
          })
        }
      }
    },
    drawPie() {
      const myChart = this.$echarts.init(document.getElementById('TimeAviso'))
      const option = {
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '10%',
          right: '0',
          bottom: '10%'
        },
        xAxis: [{
          type: 'category',
          data: this.datax,
          axisLine: {
            show: true,
            lineStyle: {
              show: true,
              color: '#F7B500',
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        }],
        yAxis: [{
          show: true,
          type: 'value',
          axisLabel: {
            textStyle: {
              color: 'rgba(250,250,250,1)',
              fontSize: 12
            },
            formatter: '{value}'
          },
          axisTick: {
            // show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              // show: false,
              // color: '#F7B500',
              width: 1,
              type: 'solid'
            }
          },
          splitLine: {
            lineStyle: {
              // color: '#F7B500'
            }
          }
        }],
        series: [{
          name: '上周未佩戴安全帽时间高峰',
          type: 'bar',
          data: this.datay,
          barWidth: 10, // 柱子宽度
          barGap: 2, // 柱子之间间距
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#F7B500'
              }, {
                offset: 1,
                color: '#F7B500'
              }]),
              opacity: 1
            }
          }
        }]
      }
      myChart.setOption(option, window.onresize = myChart.resize)
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  // color: #ffffff;
  padding: 10px;
  .title{
    display: flex;
    .text{
      flex: 1;
      text-align: left;
      .font{
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        padding: 5px 0;
        .number{
          font-size:14px;
          font-weight:500;
          color:rgba(255,255,255,0.85);
        }
      }
      .money{
         font-size: 12px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .echart{
    margin: -45px 0 16px 0;
  }
}
</style>
